<div id="content_header">
  <h3>Students</h3>
</div>

<!-- SEARCH FORM -->
<div class="row">
  <div class="col-xs-12">
    <label for="keyword">SEARCH</label>
    <div class="row">
      <div class="col-md-6 col-lg-5">
        <form class="form-vertical" ng-submit="searchStudent()">
          <div class="input-group">
            <input class="form-control" type="text" name="keyword" id="keyword" placeholder="Type Name or Student ID and press enter to search" ng-model="searchText" title-case>
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">Go!</button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <label>RESULTS</label>
    <div class="search-message">
      Found <span class="primary-color"><b>{{ (students | filter:searchKey).length }}</b></span> matched records
    </div>
  </div>
</div>

<div class="row" ng-show="students.length > 0">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>SID</th>
          <th>Last Course Taken</th>
          <th>Last Placement Test</th>
          <th>Phone</th>
          <th>Contact Info</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr dir-paginate="student in students | itemsPerPage: pagesize" total-items="totalItems">
          <td>{{ $index+1 }}</td>
          <td>
            <div class="media">
              <a class="pull-left" href>
                <div class="media-object" alt="64x64" style="width: 48px; height: 48px; background-color: #95A5A6;"><img ng-src="{{ (student.ProfilePictureUrl) ? 'http://afas42.bali.ialf.edu/images/photo/'+student.ProfilePictureUrl : 'http://placehold.it/48x48' }}" class="img-responsive"></div>
              </a>
              <div class="media-body">
                <a href ui-sref="^.show({ id: student.Id })" ng-bind-html="student.FullName | makeBold:searchKey"></a>
                    <!-- <dl>
                      <dt>Name</dt>
                      <dd ></dd>
                      <dt>Date of Birth</dt>
                      <dd>{{ student.DoB | date:'dd MMMM yyyy' }}</dd>
                      <dd><a href="" ng-click="openDetailedModal(student.Id)">More Details</a></dd>
                    </dl> -->
                  </div>
                </div>
              </td>
              <td ng-bind-html="student.SID | makeBold:searchKey"></td>
              <td>
                <span ng-if="student.LatestEnrollment">
                  <small><a href ui-sref="courseSchedules.info({ id: student.LatestEnrollment.CourseSchedule.Id })">{{ student.LatestEnrollment.CourseSchedule.CourseName }}</a></small>
                  <br>
                  <span class="label" ng-class="CourseCompletionStatus[student.LatestEnrollment.CourseCompletionStatus].LabelClass">{{ CourseCompletionStatus[student.LatestEnrollment.CourseCompletionStatus].Label }}</span>
                </span>
                <span ng-if="!student.LatestEnrollment && !student.LatestPlacementTest">
                  -
                </span>
                <span ng-if="!student.LatestEnrollment && student.LatestPlacementTest">
                  <a href ui-sref="sr.new({ id:student.Id })"><i>Register to Course</i></a>
                </span>
              </td>
              <td>
                <a ng-if="student.LatestPlacementTest" href ui-sref="pt.show.edit({ id:student.LatestPlacementTest.Id })">
                  <small>{{ student.LatestPlacementTest.DateTime  | date:'medium' }}<!-- {{ (student.LatestPlacementTest.CourseLevel)? '/'+student.LatestPlacementTest.CourseLevel.Name : '' }} --></small>
                  <br>
                  <span class="label label-success" ng-if="student.LatestPlacementTest.CourseLevel">{{ student.LatestPlacementTest.CourseLevel.Name }}</span><span class="label label-default" ng-if="!student.LatestPlacementTest.CourseLevel">Incomplete</span>
                </a>
                <span ng-if="!student.LatestPlacementTest">
                  <a ui-sref="pt.new({ id:student.Id })"><i>Register to PT</i></a>
                </span>
              </td>
              <td>
                {{ student.Phone }}
              </td>
              <td>
                <small>{{ (student.Contacts[0].Address) ? student.Contacts[0].Address + ', ' : '' }} {{ (student.Contacts[0].City.Name) ? student.Contacts[0].City.Name+', ' : '' }} {{ (student.Contacts[0].PostalCode) ? student.Contacts[0].PostalCode + ', ' : '' }}</small>
              </td>
              <td>
                <div class="btn-group pull-right">
                  <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
                    Action <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li ng-if="!student.Enrollment"><a href ui-sref="sr.new({ id:student.Id })">Register to Course</a></li>
                    <li><a ui-sref="pt.new({ id:student.Id })">Register to PT</a></li>
                    <li ng-if="student.LatestEnrollment.CourseCompletionStatus === 9"><a href ui-sref="mt.new({id: student.LatestEnrollment.Id})">Register to MUT</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Request Refund</a></li>
                    <li><a href="#">Add Discount</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Block Student</a></li>
                    <li>
                      <a class="" href ng-really-message="Are you sure?" ng-really-click="delete('students', student.Id, {collection: students, index: $index})">Delete</a>
                    </li>
                    <!-- <li><a href ng-click="disactivate(student.Id)">Delete</a></li> -->
                    <!-- <li><a ui-sref="^.show({id: student.Id})" >View Student</a></li> -->
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </div>
    </div>

<!-- MODAL - ABOUT TO BE REPLACE -->
<script type="text/ng-template" id="myModalDetailedStudent.html">
  <div class="modal-header">
    <h3 class="modal-title">{{ student.FullName }} Details</h3>
  </div>
  <div class="modal-body">
    <tabset justified="true">
      <tab heading="General">
        <div class="row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <img ng-src="{{ (student.ProfilePictureUrl) ? 'http://afas42.bali.ialf.edu/images/photo/'+student.ProfilePictureUrl : 'http://placehold.it/320x320' }}" class="img-responsive">
          </div>
          <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <dl>
              <dt>{{ student.FullName }} ( {{ student.NickName }} <i class="simple-{{ Sexes[student.Sex].Icon }}"></i> )</dt>
              <dd><i class="simple-icon-tag" tooltip="Student ID"></i> {{ student.SID }}</dd>
              <dd><i class="simple-icon-calendar" tooltip="Birth Date"></i> {{ student.DoB | date:'dd MMMM yyyy' }}</dd>
            </dl>
          </div>
        </div>
      </tab>
      <tab heading="Contacts">
        <div class="row">
          <div class="col-xs-6 col-md-6 col-lg-6" ng-repeat="contact in student.Contacts">
            <dl>
              <dt>{{ contact.ContactType.Name }}</dt>
              <dd class="text-muted"><i class="simple-icon-pointer"></i> {{ contact.Address }}, {{ contact.City.Name }}, {{ contact.PostalCode }}</dd>
              <dd class="text-muted"><i class="simple-icon-envelope-open"></i> {{ contact.Email }}</dd>
              <dd class="text-muted"><i class="simple-icon-call-end"></i> {{ contact.Phone }}</dd>
              <dd class="text-muted"><i class="simple-icon-envelope-letter"></i> {{ contact.Fax }}</dd>
            </dl>
          </div>
        </div>
      </tab>
      <tab heading="Courses">Courses content</tab>
      <tab heading="Payments">Payments content</tab>
    </tabset>
  </div>
</script>

<!-- REGISTER STUDENT -->
<div class="" ng-show="searchKey">
  <!-- <a href="#/course" class="btn btn-primary">Register a New Student</a> -->
  <a ui-sref="^.new({name: searchText})" class="btn btn-primary"><i class="simple-icon-user-follow"></i> Register a new Student</a>
</div>